<template>
  <div class="pagination">
    <div class="index-first" :class="page == 1 ? 'active' : ''">首页</div>
    <el-pagination
      background
      layout="prev, pager, next"
      :current-page="page"
      :page-size="row"
      :total="total"
      @current-change="onCurrentChange"
    >
    </el-pagination>
    <div
      class="index-end"
      :class="page == Math.ceil(Number(total) / Number(row)) ? 'active' : ''"
    >
      末页
    </div>
  </div>
</template>

<script setup>
import { ToastBottom, setObj, getObj } from "@/utils/index";
import {
  computed,
  onMounted,
  ref,
  reactive,
  toRefs,
  inject,
  defineProps,
  defineEmits,
} from "vue";
import { useRoute, useRouter } from "vue-router";
// 获取props
const props = defineProps({
  page: [Number, String],
  row: [Number, String],
  total: [Number, String],
});
const emit = defineEmits(["changePage"]);
//获取路由
const $_route = useRoute();
const $_router = useRouter();
const onCurrentChange = page => {
  console.log(page);
  emit("changePage", page);
};
</script>

<style lang="scss" scoped>
.pagination {
  @include flex(center, center);
  width: 100%;
}
.index-first {
  margin-right: 20px;
  width: 67px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: #ffffff;
  border-radius: 4px;
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #2f2f2f;
}
.index-end {
  margin-left: 20px;
  width: 67px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: #ffffff;
  border-radius: 4px;
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #2f2f2f;
}
.active {
  background: #f4a118;
  color: #ffffff;
}
</style>
